import { Card, Form, Input, Row, Modal } from 'antd';
import React, { Component } from 'react';
import { isEmpty, isFunction } from 'lodash';
import { connect } from 'dva';
import PageItem from '/common/components/PageItem';
import { createDetail, createForm } from '/common/components/HocCRUD';
import { modelName } from '../config';
import ObjectBox from '/common/componentsTpl/ObjectBox';
import { comboTypes } from '@/globalConfig';
import Position from './Position';
import ModalItem from '/common/components/ModalItem';


@Form.create()
@createForm()
class DetailForm extends Component {

  constructor(props) {
    super(props);
  }
  // 原方法
 /* getAjaxData() {
    const { compData = {} } = this.props;
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll(async (errors, fieldsValue) => {
        if (isEmpty(errors)) {
          try {
            const list = await this.jobRef.getAjaxData();
            // console.log('list', list);
            const values = {
              ...fieldsValue,
              id: compData.id,

              positions: list,
            };
            resolve(values);
          } catch (e) {
            reject(e);
          }
        } else {
          reject(errors);
        }
      });
    });
  }*/
  getAjaxData() {
    const { compData = {} } = this.props;
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll(async (errors, fieldsValue) => {
        if (isEmpty(errors)) {
          const values = {
            ...fieldsValue
          };
          compData.id > 0 && (values.id = compData.id);
          resolve(values);
        } else {
          reject(errors);
        }
      });
    });
  }

  getFields(formFields) {
    const formProps = {
      labelCol: { span: 7 },
      wrapperCol: { span: 12 },
    };
    const colSpan = 24;
    return this.props.getFields(formFields, colSpan, formProps);
  }

  render() {
    const { compData, dispatch, global } = this.props;
    const detail = compData || {};
    const formFields = [
      {
        label: '部门编码',
        fieldName: 'code',
        options: {
          initialValue: compData.code,
          rules: [{
            required: true,
            message: '请输入部门编码',
          }],
        },
        comp: <Input/>,
      },
      {
        label: '部门名称',
        fieldName: 'name',
        options: {
          initialValue: compData.name,
          rules: [{
            required: true,
            message: '请输入部门名称',
          }],
        },
        comp: <Input/>,
      },

    /*  {
        label: '所属站点',
        fieldName: 'site',
        options: {
          initialValue: detail.site || {},
          rules: [{
            type: 'object',
            // required: true,
            // message: '请选择客户级别',
          }],
        },
        comp: <ObjectBox appCode={comboTypes.CORPORATION_SITE} dispatch={dispatch}
                         compData={global[comboTypes.CORPORATION_SITE]}/>,
      },*/
    ];

    return (

          <Form layout="horizontal">
            <Row gutter={16}>
              {this.getFields(formFields)}
            </Row>
          </Form>



    );
  }
}

@connect(({ loading, department: { detail, isShowDetail }, global }) => ({
  detail,
  isShowDetail,
  loading,
  global,
}))
@createDetail({ modelName })
class DepartmentDetail extends React.Component {
  constructor(props) {
    super(props);
    this.itemRef = React.createRef();
  }

  async handleOk() {
    // console.log('this.itemRef', this.itemRef);
    const {
      saveDetail,
    } = this.props;
    const itemRef = this.itemRef.current;
    console.log(itemRef);
    itemRef.getAjaxData();
    if (itemRef && isFunction(itemRef.getAjaxData)) {
      console.log(`if`);
      try {
        const values = await itemRef.getAjaxData();
        console.info('get ajaxData values', values);
        Modal.confirm({
          title: '确认保存信息吗?',
          centered: true,
          mask:window.confirmRgba,
          onOk() {
            saveDetail(values);
          },
        });
        console.log(`点了`);
      } catch (e) {
        console.log(e);
      }
    } else {
      console.error('DepartmentDetail Have not getAjaxData function');
    }
  };


  handleCancel(e) {
    this.props.hideDetail();
  }

  render() {
    const { match, id } = this.props;
    const isEdit = (match && match.params.id > 0) || id > 0;
    return (


        <ModalItem
          width={520}
          title={`${isEdit > 0 ? '编辑' : '新建'}部门`}
          visible={this.props.isShowDetail}
          loading={!!this.props.loading.effects[`${modelName}/fetchDetail`]}
          onOk={this.handleOk.bind(this)}
          onCancel={this.handleCancel.bind(this)}
        >
        <DetailForm compData={this.props.detail}
                     global={this.props.global}
                     formLineLeg={8}
                    dispatch={this.props.dispatch}
                    wrappedComponentRef={this.itemRef}/>
        </ModalItem>

    );
  }
}

DepartmentDetail.propTypes = {};

export default DepartmentDetail;
